<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-buttons.qdoc -->
  <title>Creating Scalable Buttons and Borders | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Creating Scalable Buttons and Borders</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="quick-buttons.html" />
  <link rel="next" href="qtquick-navigator.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="quick-buttons.html">Creating Buttons</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="qtquick-navigator.html">Managing Item Hierarchy</a>
</p><p/>
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Creating Scalable Buttons and Borders</h1>
<span class="subtitle"></span>
<!-- $$$quick-scalable-image.html-description -->
<div class="descr"> <a name="details"></a>
<p>You can use the <a href="http://doc.qt.io/qt-5/qml-qtquick-borderimage.html">Border Image</a> type to display an image, such as a PNG file, as a border and a background.</p>
<p>Use two border images and suitable graphics to make it look like the button is pushed down when it is clicked. One of the border images is visible by default. You can specify that it is hidden and the other one becomes visible when the mouse is clicked.</p>
<p>Add a <a href="http://doc.qt.io/qt-5/qml-qtquick-mousearea.html">Mouse Area</a> type that covers the whole area and emits the clicked signal (<code>item.clicked()</code>) when it detects a mouse click.</p>
<p>You can add text to the button and set it up as a property. The text can then be initialized from the outside, making the button a reusable UI component. The font size is also available in case the default size is too big. You can scale down the button text and use smooth text rendering for some extra quality.</p>
<p class="centerAlign"><img src="images/qmldesigner-borderimage.png" alt="&quot;Graphical button&quot;" /></p><p>To create a graphical button:</p>
<ol class="1" type="1"><li>Select <b>File</b> &gt; <b>New File or Project</b> &gt; <b>Qt</b> &gt; <b>QML File (Qt Quick 2)</b> &gt; <b>Choose</b> to create a QML file called Button.qml (for example).<p><b>Note: </b>Types are listed in the <b>Library</b> only if the filename begins with a capital letter.</p></li>
<li>Click <b>Design</b> to edit the file in the <b>Form Editor</b>.</li>
<li>In the <b>Navigator</b>, select <b>Item</b> and set the width (<b>W</b>) and height (<b>H</b>) of the button in the <b>Properties</b> pane.</li>
<li>Select <b>Connections</b> &gt; <b>Properties</b> &gt; <b>Add</b> to add properties for the item:<p class="centerAlign"><img src="images/qmldesigner-borderimage-properties.png" alt="&quot;Properties&quot;" /></p><ol class="a" type="a"><li>Double-click in the columns in the view to specify a <code>text</code> property with the type <code>string</code> and an empty value.</li>
<li>Specify another property, <code>fontSize</code>, with the type <code>int</code> and the value <code>10</code>.</li>
</ol>
</li>
<li>Drag and drop two <b>Border Image</b> types from the <b>Library</b> to the item in the <b>Navigator</b>.</li>
<li>Drag and drop a <b>Text</b> type to the item in the navigator.</li>
<li>Drag and drop a <b>Mouse Area</b> to the item in the navigator.</li>
<li>In the navigator, select a border image to specify settings for it in the <b>Properties</b> pane:<ol class="a" type="a"><li>Select <b>Connections</b> &gt; <b>Bindings</b> &gt; <b>Add</b> to hide the image when the mouse button is not pressed down. Specify the <code>visible</code> property with the <code>!mouseArea</code> source item and <code>pressed</code> source property.<p class="centerAlign"><img src="images/qmldesigner-borderimage-bindings.png" alt="&quot;Border image bindings&quot;" /></p></li>
<li>In the <b>Source</b> field, select the image file for the button, for example button_up.png.</li>
<li>Click <b>Layout</b>, and then click the <img src="images/anchor-fill.png" alt="" /> (<b>Fill to Parent</b>) button to anchor the border image to the <b>Item</b>.</li>
</ol>
</li>
<li>Select the other border image to specify similar settings for it:<ol class="a" type="a"><li>In <b>Bindings</b>, specify the <code>visible</code> property with the <code>mouseArea</code> source item and <code>pressed</code> source property to show the image when the mouse button is pressed down.</li>
<li>In the <b>Source</b> field, select the image file for the button when it is clicked, for example button_down.png.</li>
<li>Select <b>Layout</b> &gt; <b>Fill to Parent</b> button to anchor the border image to the <b>Item</b>.</li>
</ol>
</li>
<li>Select the text to specify font size and color, and text scaling and rendering:<ol class="a" type="a"><li>In the <b>Color</b> field, use the color picker to select the font color, or enter a value in the field.</li>
<li>In <b>Bindings</b>, create bindings to properties:<p class="centerAlign"><img src="images/qmldesigner-borderimage-bindings-text.png" alt="&quot;Text bindings&quot;" /></p><ul>
<li>Set the source property of the <code>text</code> property as <code>text</code> and the source item as <code>parent</code>.</li>
<li>Set the source property of the <code>font.pixelSize</code> as <code>fontSize</code> and the source item as <code>parent</code>.</li>
<li>Set the source property of <code>scale</code> as <code>if (!mouseArea</code> and the source item as <code>pressed) { 1 } else { 0.95 }</code>.</li>
</ul>
</li>
<li>Click <b>Layout</b>, and then click the <img src="images/anchor-vertical-center.png" alt="" /> (<b>Vertical Center</b>) and <img src="images/anchor-horizontal-center.png" alt="" /> (<b>Horizontal Center</b>) buttons to inherit the vertical and horizontal centering from the parent.</li>
</ol>
</li>
<li>Select <b>mouseArea</b> in the navigator and then select <b>Connections</b> &gt; <b>Add</b> to set <code>item.clicked()</code> as the value of the <code>onClicked</code> signal handler.<p class="centerAlign"><img src="images/qmldesigner-borderimage-connections.png" alt="&quot;Item connections&quot;" /></p></li>
<li>In the <b>Text Editor</b>, specify the <code>clicked</code> signal for the Item:<pre class="qml">

  <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-item.html">Item</a></span> {
      <span class="name">id</span>: <span class="name">item</span>
      property <span class="type"><a href="http://doc.qt.io/qt-5/qml-string.html">string</a></span> <span class="name">text</span>: <span class="string">&quot;&quot;</span>
      property <span class="type"><a href="http://doc.qt.io/qt-5/qml-int.html">int</a></span> <span class="name">fontSize</span>: <span class="number">10</span>

      signal <span class="type">clicked</span>
  }

</pre>
</li>
</ol>
<p><b>Note: </b>To test the button, add it to a Qt Quick Application or Qt Quick UI project and run the application.</p></div>
<!-- @@@quick-scalable-image.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="quick-buttons.html">Creating Buttons</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="qtquick-navigator.html">Managing Item Hierarchy</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
